<template>
  <div class="o-header">
    <div class="logo">
      <img src="../assets/logo.png" style="height: 100%">
    </div>
    <ul class="henav" v-if="user">
      <!--<li>-->
        <!--<a class="notify"><el-badge is-dot class="item"><i class="glyphicon glyphicon-bell"></i>通知</el-badge></a>-->
      <!--</li>-->
      <li>
        <a class="user" :class="{open:showusrset}">
          <span class="username"><i class="glyphicon glyphicon-user" style="margin-right: 5px">{{user.sys_user_name||""}}</i> </span>
        </a>
        <transition name="fadeInRight">
          <ul class="dropdown-menu" v-show="showusrset">
            <li @click="dialogpsd=true;showusrset=false">
              <a><i class="el-icon-setting"></i>修改密码</a>
            </li>
            <li @click="logout">
              <a><i class="el-icon-circle-close"></i>退出</a>
            </li>
          </ul>
        </transition>
      </li>

    </ul>
    <el-dialog title="修改密码" :visible.sync="dialogpsd">
      <el-form :rules="rules" ref="numberValidateForm" v-if="dialogpsd" :model="respsd" label-width="80px">
        <el-form-item label="原始密码" prop="psd">
          <el-input v-model.trim="respsd.psd" type="password"></el-input>
        </el-form-item>
        <el-form-item label="新密码" prop="newpsd">
          <el-input v-model.trim="respsd.newpsd" type="password"></el-input>
        </el-form-item>
        <el-form-item label="密码确认"  prop="besurepsd">
          <el-input v-model.trim="respsd.besurepsd" type="password"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogpsd = false">取 消</el-button>
        <el-button type="primary" @click="respsdaction">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script type="text/ecmascript-6">
  import { on, off } from 'wind-dom/src/event';
import router from "../router";
  import API from  "../API"
  import {
          mapMutations,
          mapActions,
          mapState
  } from 'vuex';
  export default {
    name:"MyHeader",
    mounted() {
      if (this.user) {
        setTimeout(()=>{
            this.listennemu();
        },100)
      }
    },
    watch:{
      user(newval){
        if(newval){
          setTimeout(()=>{
              this.listennemu();
          },100)
        }
      },
      dialogpsd(newval){
        if(!newval){
          this.respsd={
            psd:"",
            newpsd:"",
            besurepsd:""
          }
          document.getElementsByClassName("fixd-head")[0].style["z-index"]="5";
        }else {
          document.getElementsByClassName("fixd-head")[0].style["z-index"]="9999999";
        }
      }
    },
    computed: {
      ...mapState({
        user: state => state.user
      }),
    },
    data(){
      var validatePass2 = (rule, value, callback) => {
        if (value == '') {
          callback(new Error('请输入密码确认'));
        } else if (value !== this.respsd.newpsd) {
          callback(new Error('两次输入密码不一致!'));
        } else {
          callback();
        }
      };
      return{
        showusrset:false,
        fullscreenLoading:false,
        dialogpsd:false,
        respsd:{
          psd:"",
          newpsd:"",
          besurepsd:"",
        },
        rules: {
          psd: [
            {required: true, message: '请输入原始密码'}
            ],
          newpsd:[
            {required: true, message: '请输入新密码'}
          ],besurepsd:[
            {required: true,validator: validatePass2,trigger: 'blur'}
          ],
          }
        }
    },
    methods:{
      respsdaction(){
        this.$refs.numberValidateForm.validate((valid) => {
          if (valid) {

            API.updateUserPass({
              sys_user_code:this.user.sys_user_code,
              oldPass:this.respsd.psd,
              newPass:this.respsd.newpsd
            }).then((res)=>{
              this.dialogpsd=false;
              let json=res.data;
              if (json.message=="success"){
                this.$notify({
                  title: '成功',
                  message: '修改成功',
                  type: 'success'
                });
              }else if (json.message=="passerror") {
                this.$notify({
                 title: '失败',
                 message: '原密码输入错误',
                 type: 'error'
               });
              } else {
                this.$notify({
                  title: '失败',
                  message: '修改失败',
                  type: 'error'
                });
              }
            }).catch(()=>{

            })
          } else {

            return false;
          }
        });

      },
      goroom(){

      },
      logout(){
        API.login_out().then((res)=>{
          let json=res.data;
          if (json.message=="success") {
            this.$message({
              showClose: true,
              message: '退出成功',
              type: 'success'
            });
            this.$store.commit("SET_USER",null);
            router.push({
              name:"登录"
            });
          }
        }).catch(()=>{

        })

      },
      listennemu(){
        let userbutton=this.$el.getElementsByClassName("user")[0];
        let usersetingbox=this.$el.getElementsByClassName("dropdown-menu")[0];
        on(userbutton,"click",(e) => {
          this.showusrset=!this.showusrset;
        });
        on(document,"click",(e) => {
          if (!userbutton.contains(e.target)&&!usersetingbox.contains(e.target)){
            this.showusrset=false;
          }
        })
      }
    },

    destroyed() {

    }
  }
</script>
<style lang="less">
  .logo{
   // background: url("../assets/logo.png") no-repeat ;
    height: 100%;
    margin-left: 50px;
   // background-position: center center;
    background-size: auto 100%;
    width: 239px;
    float: left;
  }
.o-header{
  background-color: #fff;
  height: 60px;
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.05), 0 1px 0 rgba(0, 0, 0, 0.05);
}
  .henav{
    float: right;
    height: 100%;
    li {
      float: left;
      position: relative;
      display: block;
      height: 100%;
      a{

        position: relative;
        display: block;
      }
    }
.user{

  height: 60px;
  .username{
    display: block;
    float: left;
    padding: 22px 8px;
  }
}
.notify{
  display: block;
  padding: 22px 15px 14px 15px;
}
.user:hover,.notify:hover{
  background: #f6f8f8;
  cursor: pointer;
}
.user.open{
  background: #f6f8f8;
}

  }
.dropdown-menu{

  position: absolute;
  top:61px;
  background: #fff;
  right: 0;
  padding: 10px 0;
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.05), 0 1px 0 rgba(0, 0, 0, 0.05);
  li {
    float: none;
    width: 150px;
    a{
      padding: 10px 15px;
      i{
        padding-right: 10px;
      }
    }
    a:hover{
      background: #f4f4f4;
      cursor: pointer;
    }
  }
}
  ul{
    -webkit-padding-start: 0px;
  }
.fadeInRight-enter-active {
  animation: fadeInRight .3s;
}
.fadeInRight-leave-active {
  animation: fadeOutRight .3s;
}
@keyframes fadeInRight {
  from {
    opacity: 0;
    transform: translate3d(100%, 0, 0);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes fadeOutRight {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    transform: translate3d(100%, 0, 0);
  }
}
</style>
